<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单自动填充</title>
    <script>
        // 当页面完全加载完毕后执行以下函数
        window.onload = function() {
            // 获取表单中的姓名和邮箱输入框元素
            const nameInput = document.getElementById('name');
            const emailInput = document.getElementById('email');

            // 从 localStorage 中恢复之前保存的姓名和邮箱值（如果存在）
            nameInput.value = localStorage.getItem('name') || ''; // 如果没有保存的值，则设置为空字符串
            emailInput.value = localStorage.getItem('email') || ''; // 如果没有保存的值，则设置为空字符串

            // 监听姓名输入框的变化事件，当用户输入时实时保存到 localStorage
            nameInput.oninput = function() {
                localStorage.setItem('name', this.value); // 将当前输入框的值保存到 'name' 键中
            };

            // 监听邮箱输入框的变化事件，当用户输入时实时保存到 localStorage
            emailInput.oninput = function() {
                localStorage.setItem('email', this.value); // 将当前输入框的值保存到 'email' 键中
            };
        };
    </script>
</head>
<body>
    <!-- 表单元素 -->
    <form>
        <!-- 姓名输入框 -->
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>

        <!-- 邮箱输入框 -->
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>